<template>
  <div class="relative h-full overflow-hidden login">
    <!-- 左上角logo -->
    <div class="absolute top-12 left-12 flex">
      <img
        :src="logo"
        :style="{
          height: '2rem'
        }"
      />
      <span class="ml-4 text-xl font-bold leading-8 tracking-wider">
        {{ platName }}
      </span>
    </div>

    <!-- 登录框 -->
    <div class="absolute _form">
      <div class="relative font-bold text-xl login-text">您好！欢迎登录</div>
      <a-form ref="formRef" :model="form" :rules="rules">
        <a-form-item label="" name="username">
          <a-input
            v-model:value="form.username"
            placeholder="请输入"
            @keyup.enter="submit"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="" name="password">
          <a-input
            v-model:value="form.password"
            @keyup.enter="submit"
            type="password"
            placeholder="请输入"
          >
          </a-input>
        </a-form-item>
      </a-form>
      <a-button type="submit" block @click="submit">登录</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { login, getUserInfo } from '../api/login'
import { sm2Encryption } from '../utils/common'
import { useInfoStore, platformStore } from '@/store'
import { getStorage, setStorage } from '@/utils/cache/storage'
import { useRouter } from 'vue-router'
// import { logOut } from '@/api/login'
import type { Rule } from 'ant-design-vue/es/form'
import { getSysInfo } from '@/api/platform'

const router = useRouter()
const form = reactive({
  username: getStorage('username_remember') ?? '',
  password: getStorage('password') ?? ''
})
const formRef = ref()
const width = ref()
const height = ref()
const store = useInfoStore()
const rules: Record<string, Rule[]> = {
  username: [
    {
      validator: (_rule: Rule, value: string) => {
        if (!value) {
          return Promise.reject(new Error('请输入用户名'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ],
  password: [
    {
      validator: (_rule: Rule, value: string) => {
        if (!value) {
          return Promise.reject(new Error('请输入密码'))
        }
        return Promise.resolve()
      },
      trigger: 'change'
    }
  ]
}
const platName = ref('')
const logo = ref('')
const getPlatform = () => {
  getSysInfo().then((res) => {
    if (res) {
      platName.value = res.name || '后台管理系统'
      document.getElementsByTagName('title')[0].innerHTML = platName.value
      logo.value = res.filePath
      const store = platformStore()
      store.setPlatform(res)
      const img = new Image()
      img.src = logo.value
      img.onload = () => {
        width.value = img.width / 50
        height.value = img.height / 50
      }
    }
  })
}
getPlatform()
onMounted(() => {
  const token = store.token
  if (token) {
    store.logout()
    // logOut()
    //   .then(() => {
    //     store.logout()
    //     router.push('/login')
    //   })
    //   .catch(() => {
    //     store.logout()
    //   })
  }
})
// 登录
const submit = async () => {
  await formRef.value.validateFields()
  login({
    username: form.username,
    // password: form.password,
    password: sm2Encryption(form.password),
    grant_type: 'password',
    client_id: 'hmc',
    type: 1,
    client_secret: '123456'
  }).then((res: any) => {
    if (res) {
      res.access_token = res.token
      store.getUserInfo(res)
      store.setShowMenu(true)
      setStorage('username_remember', form.username)
      getUserInfo(res.user_id).then((res) => {
        setStorage('username_nick', res.nickName || form.username)
        setStorage('role-name', res.roleName)
        router.push('/')
      })
      // setStorage('password', password.value)
    }
  })
}
</script>

<style lang="less" scoped>
.login {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('@/assets/images/login/login_bg.png');

  ._form {
    top: 50%;
    right: 10%;
    padding: 2rem 1.5rem 3.25rem;
    width: 28rem;
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 5%);
    transform: translateY(-55%);
  }

  .ant-form {
    margin-top: 1.85rem;

    .ant-input-affix-wrapper {
      margin-top: 0.75rem;
    }
  }

  .ant-btn-block {
    margin-top: 2rem;
  }

  .login-text {
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 3rem;
      height: 0.25rem;
      background: linear-gradient(to right, #00796a, #fff);
      content: '';
    }
  }
}
</style>
